<template>
  <div class="dress-mame-container">
    <div class="clearfix"> 
      <div class="fl editor-dress">地址管理</div>
      <div class="fr add-new-dress" v-if="allAddress.length < 20" @click="$router.push('/my/newAddress')">新增地址</div>
    </div>  
    <div class="list">
      <div class="m-null-data" v-if="allAddress.length < 1"></div>
      <w-table :columns="columns" v-else>
        <tr class="thead-tbl-address address-default" v-for="(address, index) in allAddress" :key="index">
          <td>{{address.trueName}}</td>
          <td>{{`${address.provinceName}省${address.cityName}${address.areaName}`}}</td>
          <td>{{address.area_info}}</td>
          <td>{{address.mobile}}</td>
          <td>{{address.telephone}}</td>
          <td class="opreate">
            <span class="fl">
              <span @click="onEditAddress(address.id)">修改</span> | <span @click="onDeleteAddress(address.id)">删除</span>
            </span>
            <span class="default" :class="{actived: address.default_val}" @click="onSetDefaultAddress(address.default_val, address.id)">默认地址</span>
          </td>
          <!-- <td><span class="default" :class="{actived: address.default_val}" @click="onSetDefaultAddress(address.default_val, address.id)">默认地址</span></td> -->
        </tr>
      </w-table>
    </div>
  </div>
</template>

<script>
  import { apiDeleteAddress, apiEditDefaultAddress } from 'js/api'
  import { mapActions, mapGetters } from 'vuex'

  export default {
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.fetchAllAddress({
          token: vm.token
        })
      })
    },
    data() {
      return {
        columns: [ // 表格头
          { title: '收货人', width: '140' },
          { title: '所在地区', width: '170' },
          { title: '详细地址', width: '170' },
          { title: '手机', width: '80' },
          { title: '电话', width: '140' },
          { title: '操作', width: '150' }
        ]
      }
    },
    computed: {
      ...mapGetters(['allAddress', 'token'])
    },
    methods: {
      ...mapActions(['fetchAllAddress']),
      // 编辑地址
      onEditAddress(id) {
        this.$router.push(`/my/newaddress?id=${id}`)
      },
      // 删除地址
      onDeleteAddress(addressId) {
        const _this = this
        this.$modal({
          content: '您确认删除地址吗',
          onConfirm() {
            apiDeleteAddress(_this.token, addressId).then(data => {
              _this.$toast('删除成功')
              _this.fetchAllAddress({
                token: _this.token
              })
            })
          }
        })
      },
      // 设置默认地址
      onSetDefaultAddress(isDefault, id) {
        if (!isDefault) {
          apiEditDefaultAddress(this.token, id).then(data => {
            this.$toast('默认地址设置成功', () => {
              this.fetchAllAddress({
                token: this.token
              })
            })
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../scss/_var.scss';
  .dress-mame-container {
    background-color: $color-white;
    padding: 20px;
    .add-new-dress {
      color: $color-main;
      border: 1px solid $color-main;
      width: 78px;
      height: 24px;
      text-align: center;
      line-height: 24px;
      font-size: 14px;
      cursor: pointer;
    }
    .btn {
      height: 28px;
      line-height: 28px;
      padding: 0 20px;
      font-weight: 700;
      font-size: 14px;
      border-radius: 3px;
    }
    .table{
      border: 1px solid #e7e7e7;
      th {
        padding: 10px;
      }
    }
    td {
      padding: 20px 5px;
      white-space: normal;
      text-align: center;
      font-size: 14px;
      cursor: pointer;
      word-break: break-all;
    }
    .list {
      margin-top: 10px;
      tr {
        &:hover .default {
          display: inline-block;
        }
      }
      .default {
        color: $color-main;
        display: none;
        margin-left: 10%;
        width: 68px;
        &.actived {
          display: inline-block;
        }
      }
      .opreate {
        color: $color-main;
      }
    }
    .editor-dress {
      font-size: 14px;
      color: $color-dark;
    }
  }
  .m-null-data {
    height: 350px;
    margin-top: 60px;
    background: url(../../assets/nullIcon/icon_null.png) no-repeat center center;
  }
</style>